<template>
  <div class="BreadCrumb">
    <div class="left"><el-breadcrumb separator="/">
        <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
        <el-breadcrumb-item v-for="item in list" :key="item">{{ item }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="right">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="page">首页</el-dropdown-item>
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item>切换账号</el-dropdown-item>
          <el-dropdown-item @click.native="cli">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>


  </div>
</template>

<script>
import { user } from "@/api/index"

export default {
  name: 'BreadCrumb',
  data() {
    return {
      list: [],
      username: ""
    }
  },
  methods: {
    cli() {

      sessionStorage.clear()
      this.$router.push("/LoginView")
    },
    page() {
      console.log(this.$route.path)
      if (this.$route.path != "/HomeView") {
        this.$router.push("/HomePage")
      }
    },
    user() {
      let use = sessionStorage.getItem("token")
      console.log(use)
      let a = user(use)
      console.log(a)

    }
  },
  async mounted() {

    // console.log(this.$route.meta.nav)
    this.list = this.$route.meta.nav
    let { data: res } = await user(sessionStorage.getItem("token"))
    // console.log(res)
    this.username = res.adminCenterUser.username


  },
  watch: {
    $route: {
      handler(n) {
        // console.log(n.meta.nav)
        this.list = n.meta.nav
      },
      deep: true
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" >
.right {
  padding-right: 20px;



}

.el-dropdown {
  line-height: 50px;
}

.BreadCrumb {
  display: flex;
  justify-content: space-between;
}

.el-breadcrumb {
  line-height: 50px;

  .el-breadcrumb__item {
    font-size: 15px;


  }

  &::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #97A8BE;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
